<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <!-- 网站图标 -->
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 引入初始化样式 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共部分 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入item.css -->
    <link rel="stylesheet" href="css/item.css">
    <!-- 引入js的文件 -->
    <script src="js/detail.js"></script>
</head>
<!-- 快捷导航栏 -->
<section class="shortcut">
    <div class="w">
        <!-- 左侧盒子 -->
        <div class="fl">
            <!-- <span>品优购欢迎您！请登录</span>
                <a href="#">免费注册</a> -->
            <ul>
                <li>品优购欢迎您! &nbsp;&nbsp;</li>
                <li>
                    <a href="login.html">登录</a>&nbsp;&nbsp;<a href="register.html" class="stlye_red">免费注册</a>
                </li>
            </ul>
        </div>
        <!-- 右侧盒子 -->
        <div class="fr">
            <ul>
                <li>我的订单</li>
                <li></li>
                <li class="arrow-icon">我的品优购</li>
                <li></li>
                <li>品优购会员</li>
                <li></li>
                <li>企业采购</li>
                <li></li>
                <li class="arrow-icon">关注品优购</li>
                <li></li>
                <li class="arrow-icon">客户服务</li>
                <li></li>
                <li class="arrow-icon">网站导航</li>
            </ul>
        </div>
    </div>
</section>
<!-- 快捷导航栏 -->

<!-- 头部盒子的制作 -->
<header class="header w">
    <!-- 图标制作 -->
    <div class="logo">
        <h1>
            <a href="index.html" title="品优购商城">品优购商城</a>
        </h1>
    </div>

    <!-- 搜索栏制作 -->
    <div class="search">
        <input type="search" name="" id="" placeholder="前端开发">
        <button>搜索</button>
    </div>

    <!-- hotwords的制作 -->
    <div class="hotwords">
        <a href="#">优惠购首发</a>
        <a href="#">亿元优惠</a>
        <a href="#">9.9元团购</a>
        <a href="#">美满99减30</a>
        <a href="#">办公用品</a>
        <a href="#">电脑</a>
        <a href="#">通信</a>
    </div>
    <!-- 购物车模块 -->
    <a href="shopcar.html" class="shopcar">
        我的购物车
        <i class="count">
            8
        </i>
    </a>
</header>
<!-- 头部盒子的制作 -->

<!-- 导航栏制作 -->
<nav class="nav">
    <div class="w">
        <div class="dropdown">
            <div class="dt">全部商品分类</div>
        </div>
        <div class="navitems">
            <ul>
                <li><a href="#">服装城</a></li>
                <li><a href="#">美妆馆</a></li>
                <li><a href="#">传智超市</a></li>
                <li><a href="#">全球购</a></li>
                <li><a href="#">闪购</a></li>
                <li><a href="#">团购</a></li>
                <li><a href="#">拍卖</a></li>
                <li><a href="#">有趣</a></li>
            </ul>
        </div>
    </div>
</nav>
<!-- 导航栏制作 -->

<!-- main制作开始 -->
<div class="w">
    <div class="main">
        <div class="main-left">
            <div class="main-left-top">
                <span>手机、数码、通讯 &nbsp;&nbsp;〉 &nbsp;手机 &nbsp;&nbsp;〉 &nbsp;&nbsp; Apple苹果 &nbsp;&nbsp;>
                    &nbsp;&nbsp;&nbsp;iphone 6S Plus系类 </span>
            </div>
            <div class="main-left-mid">
                <div class="mask"></div>
                <div class="big">
                    <img src="../JS学习/jsapis_material/第五天/05-京东放大镜效果/upload/big.jpg" alt="" class="bigimg">
                </div>
            </div>
            <div class="main-left-bottom">
                <ul>
                    <li class="Li"><a href="#">&lt;</a></li>
                    <li><a href="#"><img src="../shoping/upload/b1.png" alt=""></a></li>
                    <li><a href="#"><img src="../shoping/upload/b2.png" alt=""></a></li>
                    <li><a href="#"><img src="../shoping/upload/b3.png" alt=""></a></li>
                    <li><a href="#"><img src="../shoping/upload/b1.png" alt=""></a></li>
                    <li><a href="#"><img src="../shoping/upload/b2.png" alt=""></a></li>
                    <li class="Li1"><a href="#">&gt;</a></li>
                </ul>
            </div>
            <div class="shopnum">商品编号：0468256644</div>
        </div>
        <div class="main-right">
            <h4>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h4>
            <p class="pp">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
            <div class="xxx">
                <div class="xx">
                    <span>价 &nbsp;&nbsp; 格 &nbsp;&nbsp;</span>
                    <span>￥5299.00</span>
                    <span>降价通知</span>
                    <span>612188</span>
                    <span>累计评价</span>
                </div>
                <i>促 &nbsp;&nbsp; 销</i> <span class="sp"> &nbsp;&nbsp;加购价</span>
                <em> &nbsp;&nbsp; &nbsp;满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
                    购热销商品 详情 》</em>
            </div>
            <p>支 &nbsp;&nbsp; 持<span>&nbsp;&nbsp;&nbsp;&nbsp;以旧换新，闲置手机回收 4G套餐超值抢 礼品购</span></p>
            <p>配&nbsp;送&nbsp;至 <span>&nbsp;北京海淀区中关 &nbsp;&nbsp;&nbsp;&nbsp;有货 &nbsp;&nbsp;&nbsp;支持
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;99元免运费 |货到付款 |211限时达 </span></p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;由自营发货，并提供售后服务。11:00前完成下单，预计今天（08月10日）送达
            </p>
            <div>____________________________________________________________________________________________________
            </div>
            <ul class="choose">
                <li>选择颜色</li>
                <li><a href="#">金色</a></li>
                <li><a href="#">黑色</a></li>
                <li><a href="#">银色</a></li>
                <li><a href="#">玫瑰金</a></li>
            </ul>
            <ul class="choose">
                <li>选择版本</li>
                <li>公开版</li>
                <li>移动4G</li>
            </ul>
            <ul class="choose">
                <li>选择容量</li>
                <li>16GB</li>
                <li>64GB</li>
                <li>128GB</li>
            </ul>
            <ul class="choose">
                <li>购买方式</li>
                <li>官方标配</li>
                <li>移动优惠购</li>
                <li>电信优惠购</li>
            </ul>
            <ul class="choose">
                <li>套 &nbsp;装</li>
                <li>保护套装</li>
                <li>充电套装</li>
            </ul>
            <div class="addnum">
                <div class="addnum_left">1</div>
                <div class="addnum_right">
                    <button class="addnum_right_top">+</button>
                    <button class="addnum_right_bottom">-</button>
                </div>
            </div>
            <button class="addshoping">加入购入车</button>
        </div>
    </div>
    <div class="news">
        <div class="news_left">
            <div class="news_left_top">
                <div class="news_left_top_left">相关分类</div>
                <div class="news_left_top_right">推荐品牌</div>
            </div>
            <div class="news_left_mid clearfix">
                <ul>
                    <li>手机</li>
                    <li>手机壳</li>
                    <li>内存卡</li>
                    <li>iPhone配件</li>
                    <li>贴膜</li>
                    <li>手机耳机</li>
                    <li>移动电源</li>
                    <li>平板电脑</li>
                    <li>笔记本</li>
                    <li>蓝牙耳机</li>
                </ul>
            </div>
            <div class="news_left_bottom clearfix">
                <ul>
                    <li class="firstli">
                        购买了此商品的用户还购买了
                    </li>
                    <li>
                        <img src="upload/b3.png" alt="">
                        <p>蓝孩 苹果iphone6S 抗蓝光防爆</p>
                        <p>￥19</p>
                        <button>加入购物车</button>
                    </li>
                    <li>
                        <img src="upload/b3.png" alt="">
                        <p>蓝孩 苹果iphone6S 抗蓝光防爆</p>
                        <p>￥19</p>
                        <button>加入购物车</button>
                    </li>
                    <li>
                        <img src="upload/b3.png" alt="">
                        <p>蓝孩 苹果iphone6S 抗蓝光防爆</p>
                        <p>￥19</p>
                        <button>加入购物车</button>
                    </li>
                    <li>
                        <img src="upload/b3.png" alt="">
                        <p>蓝孩 苹果iphone6S 抗蓝光防爆</p>
                        <p>￥19</p>
                        <button>加入购物车</button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="news_right clearfix">
            <div class="news_right_top clearfix">
                <div class="news_right_top_top">
                    <ul>
                        <li>商品介绍</li>
                        <li>规格与包装</li>
                        <li>售后保障</li>
                        <li>商品评价(5000)</li>
                        <li>手机社区</li>
                    </ul>
                </div>
                <div class="news_right_top_buttom">
                    分辨率：1920*1080(FHD) <br>
                    后置摄像头：1200万像素<br>
                    前置摄像头：500万像素<br>
                    核 数：其他<br>
                    频 率：以官网信息为准<br>
                    品牌： Apple ♥关注<br>
                    商品名称：APPLEiPhone 6s Plus<br>
                    商品编号：1861098<br>
                    商品毛重：0.51kg<br>
                    商品产地：中国大陆<br>
                    热点：指纹识别，Apple Pay，金属机身，拍照神器<br>
                    系统：苹果（IOS）<br>
                    像素：1000-1600万<br>
                    机身内存：64GB<br>
                </div>
            </div>
            <div class="news_right_bottom clearfix">
                <img src="upload/图层161.png" alt="">
                <img src="upload/图层162.png" alt="">
            </div>
        </div>
    </div>
    <div class="guessUlike">
        <div class="guessUlike_top">
            &nbsp; 猜你喜欢
        </div>
        <div class="guessUlike_bottom">
            <ul>
                <li>
                    <img src="upload/mobile.png" alt="">
                    <h4>DELL 戴尔ins 15MR-75 <br>
                        28ss 15英寸 银色 笔记
                    </h4>
                    <p>￥3699</p>
                    <em>已有<span>6</span>人评价</em>
                </li>
                <li>
                    <img src="upload/mobile.png" alt="">
                    <h4>Apple/苹果 iPhone 6s /6<br>
                        s Plus 16G 64G 128G
                    </h4>
                    <p>￥3699</p>
                    <em>已有<span>6</span>人评价</em>
                </li>
                <li>
                    <img src="upload/mobile.png" alt="">
                    <h4>Apple/苹果 iPhone 6s /6<br>
                        s Plus 16G 64G 128G
                    </h4>
                    <p>￥3699</p>
                    <em>已有<span>6</span>人评价</em>
                </li>
                <li>
                    <img src="upload/mobile.png" alt="">
                    <h4>Apple/苹果 iPhone 6s /6<br>
                        s Plus 16G 64G 128G
                    </h4>
                    <p>￥3699</p>
                    <em>已有<span>6</span>人评价</em>
                </li>
                <li>
                    <img src="upload/mobile.png" alt="">
                    <h4>Apple/苹果 iPhone 6s /6<br>
                        s Plus 16G 64G 128G
                    </h4>
                    <p>￥3699</p>
                    <em>已有<span>6</span>人评价</em>
                </li>
                <li>
                    <img src="upload/mobile.png" alt="">
                    <h4>Apple/苹果 iPhone 6s /6<br>
                        s Plus 16G 64G 128G
                    </h4>
                    <p>￥3699</p>
                    <em>已有<span>6</span>人评价</em>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- main制作结束 -->

<!-- footer制作 -->
<footer class="footer">
    <div class="w">
        <div class="mod_service">
            <ul>
                <li>
                    <h5 class="i1"></h5>
                    <h4>正品保障</h4>
                    <p>正品保障,提供发票</p>
                </li>
                <li>
                    <h5 class="i2"></h5>
                    <h4>极速物流</h4>
                    <p>急速物流，急速送达</p>
                </li>
                <li>
                    <h5 class="i3"></h5>
                    <h4>无忧售后</h4>
                    <p>七天无理由退款</p>
                </li>
                <li>
                    <h5 class="i4"></h5>
                    <h4>特色服务</h4>
                    <p>私人订制家电套餐</p>
                </li>
                <li>
                    <h5 class="i5"></h5>
                    <h4>帮助中心</h4>
                    <p>您的购物指南</p>
                </li>
            </ul>
        </div>
        <div class="mod_help">
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <dt>配送方式</dt>
                <dd><a href="#">上门自提</a></dd>
                <dd><a href="#">211限时达</a></dd>
                <dd><a href="#">配送服务查询</a></dd>
                <dd><a href="#">配送费收取标准</a></dd>
                <dd><a href="#">海外配送</a></dd>
            </dl>
            <dl>
                <dt>支付方式</dt>
                <dd><a href="#">货到付款</a></dd>
                <dd><a href="#">在线支付</a></dd>
                <dd><a href="#">分期付款</a></dd>
                <dd><a href="#">邮局汇款</a></dd>
                <dd><a href="#">公司转账</a></dd>
            </dl>
            <dl>
                <dt>售后服务</dt>
                <dd><a href="#">售后政策</a></dd>
                <dd><a href="#">价格保护</a></dd>
                <dd><a href="#">退款说明</a></dd>
                <dd><a href="#">返修/退换货</a></dd>
                <dd><a href="#">取消订单</a></dd>
            </dl>
            <dl>
                <dt>特色服务</dt>
                <dd><a href="#">夺宝岛</a></dd>
                <dd><a href="#">DIY装机</a></dd>
                <dd><a href="#">延保服务</a></dd>
                <dd><a href="#">品优购E卡</a></dd>
                <dd><a href="#">品优购通信</a></dd>
            </dl>
            <dl class="dllast">
                <dt>帮助中心</dt>
                <dd><img src="../shoping/images/多边形1拷贝.png" alt=""></dd>
                <dd>品优购客户端</dd>
            </dl>
        </div>
        <div class="mod_copyright">
            <ul>
                <li>关于我们</li>
                <li></li>
                <li>联系我们</li>
                <li></li>
                <li>联系客服</li>
                <li></li>
                <li>商家入驻</li>
                <li></li>
                <li>营销中心</li>
                <li></li>
                <li>手机品优购</li>
                <li></li>
                <li>友情链接</li>
                <li></li>
                <li>销售联盟</li>
                <li></li>
                <li>品优购社区</li>
                <li></li>
                <li>品优购公益</li>
                <li></li>
                <li>English Site</li>
                <li></li>
                <li>Contact U</li>
            </ul>
            <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>
                京ICP备08001421号京公网安备110108007702
            </p>
        </div>
    </div>
</footer>
<!-- footer制作 -->

<body>

</body>

</html>